define(function(require, exports, module) {

  // var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('lodash');
  // var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  var littleCanvas = require('hy5b/frontend/canvas/littleCanvas')
  var lottie = require('https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.3/lottie.min.js')
  var animationData = require('json!v/graph-lottie/demo/js/52-bounce.json')
  var addReduce = require('hy5b/frontend/animation/add-reduce')

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    var lc = new littleCanvas().setSize(env.w, env.h)
    $('#lottie').append(lc.pop())

    var anim = lottie.loadAnimation({
      // container: document.getElementById('lottie'), // Required
      // path: 'data.json', // Required
      animationData: animationData,
      renderer: 'canvas', // Required
      loop: true, // Optional
      autoplay: false, // Optional
      name: "Hello World", // Name for future reference. Optional.
      rendererSettings: {
        context: lc.ctx, // the canvas context
        // scaleMode: 'noScale',
        clearCanvas: false,
        progressiveLoad: false, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
        hideOnTransparent: true //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
      }
    })

    var T = anim.getDuration() * 1000 //ms

    console.log(T)

    let params = {
      time: [0, 16.67]
    };
    
    _.each(params, function(v, param) {
      let val = v;
      let delta;
      if (val.length > 0) {
        delta = val[1]
        val = val[0]
        params[param] = val
      }
      $app.append(
        addReduce({
          set: (function(param) {
            return function(value) {
              params[param] = value;
              // step()
            }
          }(param)),
          key: param,
          val: val,
          delta: delta
        })
      )

      $app.append('<br/>')
    })

    function step() {
      requestAnimationFrame(step)

      if (params.time >= T) {
        params.time = 0
      }

      lc.clear()
      lc.draw(ctx => {
        ctx.rect(0,0,env.w,env.h)
        ctx.strokeStyle = 'red'
        ctx.lineWidth = 3
        ctx.stroke()
      })

      anim.goToAndStop(params.time)

      params.time += 16.67
    }

    step()
  }

  return main;
})
